<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>IFRAME</title>
    <meta name="description" content="Scene contained in an iframe - A-Frame">
    <script src="../../../dist/aframe-master.js"></script>
    <style>
      body {
        background-color: black;
        height: 100%;
        margin: 0;
        overflow: hidden;
        padding: 0;
        width: 100%;
      }
      iframe {
        width: 100%;
        height: 100%;
      }

      .enter-vr {
        background-size: 70% 70%;
        border: 0;
        right: 50px;
        bottom: 50px;
        cursor: pointer;
        height: 50px;
        position: absolute;
        border-radius: 6px;
        transition: background-color .05s ease;
        -webkit-transition: background-color .05s ease;
        width: 100px;
        z-index: 999999;
      }

      .enter-vr:hover {
        background-color: #249889;
        color: white;
      }
    </style>
  </head>
  <body>
    <iframe id="aframe" src="/examples/animation/aframe-logo/?ui=false"></iframe>
    <button class="enter-vr">ENTER VR</button>
  </body>
  <script>
    var buttonEl = document.querySelector('.enter-vr');
    var iframeWindow = document.querySelector('#aframe').contentWindow;
    buttonEl.addEventListener('click', handleClick);
    function handleClick() {
      iframeWindow.postMessage({
        type: 'vr',
        data: 'enter'
      }, '*');
    }
  </script>
</html>
